<template>
  <view class="recharge-contanier">
    <Navbar :title="t('recharge.title')"> </Navbar>

    <view class="content">
      <view class="form-content">
        <view class="item cion-type">
          <view
            ><text>{{ t("bankDetail.one") }}</text
            ><text class="type">{{ orderDetail.token_name }}</text></view
          >
        </view>
        <view class="item" v-for="(item, index) in keyMap" :key="item.field">
          <view>{{ item.title }} :</view>
          <view class="input-item">
            <view
              class="input"
              :class="{ 'text-area': item.type == 'text-area' }"
              >{{ orderDetail[item.field] }}</view
            >
            <view
              v-if="item.type == 'copy'"
              @click="copyAnyThing(orderDetail.payee_account)"
              ><img src="../../static/my/Frame.png" alt=""
            /></view>
          </view>
        </view>
        <view class="item">
          <view>{{ t("bankDetail.nine") }}</view>
          <view class="detail-pic" @click="upload">
            <img
              :src="
                payment1_detail_pic
                  ? payment1_detail_pic
                  : '../../static/my/we2@2x(2).png'
              "
              alt=""
            />
          </view>
        </view>
        <view class="operation">
          <button
            class="btn"
            :loading="loading"
            :disabled="loading"
            @click="confirm"
          >
            {{ t("bankDetail.ten") }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import Navbar from "../../components/Navbar.vue";
import api from "../../networks/apis";
import { useI18n } from "vue-i18n";
// import { copyAnyThing } from "../../utils/pubUse";
import config from "../../networks/config";
const { t } = useI18n();
const payment_detail_pic = ref(""); //传参用
const payment1_detail_pic = ref(""); //展示用
const loading = ref(false); //按钮禁用
const keyMap = [
  {
    title: t("bankDetail.two"),
    field: "bank_name",
  },
  {
    title: t("bankDetail.three"),
    field: "bank_address",
  },
  {
    title: "SWIFT",
    field: "swift_code",
  },
  {
    title: t("bankDetail.four"),
    field: "payee",
  },
  {
    title: t("bankDetail.five"),
    field: "payee_account",
    type: "copy",
  },
  {
    title: t("bankDetail.six"),
    field: "play_amount",
  },
  {
    title: t("bankDetail.seven"),
    field: "obtain_amount",
  },
  {
    title: t("bankDetail.eight"),
    field: "notes",
    type: "text-area",
  },
];

const orderDetail = ref({
  id: null,
  recharge_id: "",
  address: "",
  type: null,
  bank_name: "",
  bank_address: "",
  payee: "",
  payee_account: "",
  notes: "",
  token_name: "",
  rate: 0,
  play_amount: "",
  swift_code: "",
  obtain_amount: "",
  payment_detail_pic: "",
  status: 0, //	1待匹配 2待支付 3 取消支付 4待审核 5审核通过 6审核失败
  create_time: "",
  update_time: "",
  created_at: null,
  updated_at: "",
});
onMounted(() => {
  const instance = getCurrentInstance().proxy;
  const eventChannel = instance.getOpenerEventChannel();

  eventChannel.on("acceptDataFromOpenerPage", function ({ data }) {
    orderDetail.value = data;
  });
});
const copyAnyThing = (url) => {
  uni.setClipboardData({
    data: url,
    success: function () {
      uni.showToast({
        title: "复制成功",
        duration: 2000,
      });
    },
    fail: function () {
      uni.showToast({
        title: "复制失败",
        icon: "error",
        duration: 2000,
      });
    },
  });
};
// 提交
const confirm = async () => {
  if (!payment_detail_pic.value) {
    uni.showToast({
      title: "Please upload payment screenshot",
      icon: "none",
    });
    return;
  }
  loading.value = true;
  const res = await api.receiptFormOrderApi({
    payment_detail_pic: payment_detail_pic.value,
    recharge_id: orderDetail.value.recharge_id,
  });
  loading.value = false;
  if (res.code != 0) {
    uni.showToast({
      title: res.msg || res.data.msg || "提交失败",
      icon: "error",
      duration: 2000,
    });
  } else {
    uni.showToast({
      title: "提交成功",
      icon: "success",
      duration: 1000,
    });
    const t = setTimeout(() => {
      clearTimeout(t);
      uni.reLaunch({
        url: "/pages/my/index",
      });
    }, 1500);
  }
};
// 上传图片
const upload = async () => {
  const url = config.BASE_DOMAIN + "/api/authentication/upload";
  uni.showLoading({
    mask: true,
  });
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择
    success: (res) => {
      //用箭头函数，this指向上下文
      uni.uploadFile({
        url: url,
        filePath: res.tempFilePaths[0],
        name: "photo",
        header: {
          // 在这里可以设置其他请求头
          Authorization: "Bearer " + localStorage.getItem("token") || "",
        },
        success: (uploadFileRes) => {
          console.log("uploadFileRes", JSON.parse(uploadFileRes.data).data);
          const data = JSON.parse(uploadFileRes.data).data;
          payment1_detail_pic.value = data.view_path || "";
          payment_detail_pic.value = data.path || "";
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    fail: (err) => {
      console.log("上传失败", err);
      uni.hideLoading();
    },
  });
  const t = setTimeout(() => {
    console.log("关闭loading");
    clearTimeout(t);
    uni.hideLoading();
  }, 3000);
};
</script>
<style lang="scss" scoped>
.recharge-contanier {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 85rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
  color: #fff;
  .content {
    margin-top: 35rpx;
    padding: 0 25rpx;
    .headers {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 105rpx;
      background: #060a0d;
      border-radius: 53rpx 53rpx 53rpx 53rpx;
      .title {
        width: 50%;
        height: 100%;
        line-height: 105rpx;
        text-align: center;
      }
      .active {
        background: linear-gradient(133deg, #91e3d7 0%, #2b9bb2 100%);
        border-radius: 53rpx 53rpx 53rpx 53rpx;
        color: #060a0d;
      }
    }
    .form-content {
      margin-top: 35rpx;

      .item {
        margin: 25rpx 0;
        .input-item {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15rpx;
          background: #060a0d;
          border-radius: 12rpx;
          margin-top: 15rpx;
          .input {
            height: 89rpx;
            display: flex;
            align-items: center;
          }
          .text-area {
            height: 234rpx;
            padding: 15rpx;
            display: flex;
            align-items: center;
          }
        }
        .detail-pic {
          width: 282rpx;
          height: 242rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 35rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .cion-type {
        position: relative;
        height: 89rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #4f575b;
        .type {
          margin-left: 15rpx;
          color: #2b9bb2;
        }
        .arrow {
          width: 26rpx;
          height: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .arrow-up {
          transform: rotate(90deg);
        }
        .cionSeletion {
          position: absolute;
          right: 0;
          top: 89rpx;
          width: 255rpx;
          background-color: #060a0d;
          border-radius: 12rpx;
          padding: 15rpx 28rpx;
          .selectItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15rpx 0;
          }
        }
      }

      .operation {
        margin-top: 45rpx;
        .btn {
          height: 99rpx;
          line-height: 99rpx;
          background: linear-gradient(133deg, #91e3d7 0%, #2b9bb2 100%);
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          font-weight: 600;
        }
      }
      .operation1 {
        margin-top: 30vh;
      }
    }
  }
}
</style>
